div{
    font-size: 24px;
}
/*Image1*/
.wrap{
    height: 150px;
    width: 260px;/*width=root number 3 * height*/
    position: relative;
    margin-left: 30px;
    background: url(../images/1.jpg) 50% 50% no-repeat;
    background-size: auto 300px;/* auto=height*2*/
}
.common{
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    left: 0;
}
.common:before{
    content: '';
    position: absolute;
    background: url(../images/1.jpg) 50% 50% no-repeat;
    background-size: auto 300px;
    width: 260px;/*wrap's width*/
    height: 300px;/*220/190*width*/
}
.left{
    transform: rotate(60deg);
}
.left:before{
    transform: rotate(-60deg) translate(65px,-38px);/*220/common_height*48,220/common_height*28*/
}
.right{
    transform: rotate(-60deg);
}
.right:before{
    transform: rotate(60deg) translate(65px,38px);
    bottom: 0;
}

/*Image2*/
.wrap1{
    height: 150px;
    width: 260px;
    position: relative;
    margin-left: 30px;
    background: url(../images/2.jpg) 50% 50% no-repeat;
    background-size: auto 300px;
}
.common1{
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    left: 0;
}
.common1:before{
    content: '';
    position: absolute;
    background: url(../images/2.jpg) 50% 50% no-repeat;
    background-size: auto 300px;
    width: 260px;
    height: 300px;
}
.left1{
    transform: rotate(60deg);
}
.left1:before{
    transform: rotate(-60deg) translate(65px,-38px);
}
.right1{
    transform: rotate(-60deg);
}
.right1:before{
    transform: rotate(60deg) translate(65px,38px);
    bottom: 0;
}

/*Image3*/
.wrap2{
    height: 150px;
    width: 260px;
    position: relative;
    margin-left: 30px;
    background: url(../images/3.jpg) 50% 50% no-repeat;
    background-size: auto 300px;
}
.common2{
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    left: 0;
}
.common2:before{
    content: '';
    position: absolute;
    background: url(../images/3.jpg) 50% 50% no-repeat;
    background-size: auto 300px;
    width: 260px;
    height: 300px;
}
.left2{
    transform: rotate(60deg);
}
.left2:before{
    transform: rotate(-60deg) translate(65px,-38px);
}
.right2{
    transform: rotate(-60deg);
}
.right2:before{
    transform: rotate(60deg) translate(65px,38px);
    bottom: 0;
}

/*Image4*/
.wrap3{
    height: 150px;
    width: 260px;
    position: relative;
    margin-left: 30px;
    background: url(../images/4.jpg) 50% 50% no-repeat;
    background-size: auto 300px;
}
.common3{
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    left: 0;
}
.common3:before{
    content: '';
    position: absolute;
    background: url(../images/4.jpg) 50% 50% no-repeat;
    background-size: auto 300px;
    width: 260px;
    height: 300px;
}
.left3{
    transform: rotate(60deg);
}
.left3:before{
    transform: rotate(-60deg) translate(65px,-38px);
}
.right3{
    transform: rotate(-60deg);
}
.right3:before{
    transform: rotate(60deg) translate(65px,38px);
    bottom: 0;
}